<template>
  <div class="search-suggestion">
    <van-cell
      icon="search"
      v-for="(text, index) in suggestions"
      :key="index"
      @click="$emit('search',text)"
    >
    <div slot="title" v-html="highlight(text)"></div>
    </van-cell>
  </div>
</template>

<script>
import { getSearchSuggestion } from '@/api/search.js'
import {debounce} from 'lodash'
export default {
  name: "SearchSuggestion",
  props: {
    searchText: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      suggestions: '',
    };
  },
  watch: {
    searchText: {
      // 当 searchText 发生变化时触发handler函数
      //handler 函数名称是固定的

    // debounce 函数
    // 参数1 一个函数
    // 参数2 延迟的时间
    // 返回值 防抖之后的函数
    handler:debounce (function (value){
        this.loadSearchSuggestion(value);
    },200),
    //   handler(value) {
    //     this.loadSearchSuggestion(value);
    //   },
      immediate: true, // 该函数会在侦听开始之后被立即调用
    },
  },
  created() {},
  computed: {},
  methods: {
    async loadSearchSuggestion(q) {
      try {
        const { data } = await getSearchSuggestion(q);
        this.suggestions = data.data.options;
      } catch(err) {
        this.$toast("获取失败",err);
        console.log(err);
      }
    },
    highlight(text){
        const highlightStr = `<span class="active">${this.searchText}</span>`

        // 正则表达式 // 中间的内容都会当作匹配字符来使用 而不是数据变量
        // 如果需要根据数据变量动态的创建正则表达式 则手动 new RegExp
       // 参数1 匹配模式字符串
       // 参数2 匹配模式
       const reg = new RegExp(this.searchText,'gi')
       return text.replace(reg,highlightStr)
    }
  },
  components: {},
};
</script>

<style lang='less' scoped>
.search-suggestion{
   /deep/ span.active {
        color:deeppink;
    }
}
</style>